// 引入WebDAV客户端
// WebDAVClient类在webdav.js中定义

// 国际化函数
function getMessage(key) {
  return chrome.i18n.getMessage(key) || key;
}

// 初始化国际化
function initializeI18n() {
  // 更新所有带有 data-i18n 属性的元素
  document.querySelectorAll('[data-i18n]').forEach(element => {
    const key = element.getAttribute('data-i18n');
    const message = getMessage(key);
    if (message) {
      element.textContent = message;
    }
  });
  
  // 更新所有带有 data-i18n-placeholder 属性的元素
  document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
    const key = element.getAttribute('data-i18n-placeholder');
    const message = getMessage(key);
    if (message) {
      element.placeholder = message;
    }
  });
  
  // 更新所有带有 data-i18n-title 属性的元素
  document.querySelectorAll('[data-i18n-title]').forEach(element => {
    const key = element.getAttribute('data-i18n-title');
    const message = getMessage(key);
    if (message) {
      element.title = message;
    }
  });
  
  // 更新所有带有 data-i18n-tooltip 属性的元素
  document.querySelectorAll('[data-i18n-tooltip]').forEach(element => {
    const key = element.getAttribute('data-i18n-tooltip');
    const message = getMessage(key);
    if (message) {
      element.setAttribute('data-tooltip', message);
    }
  });
  
  // 更新页面标题
  const titleElement = document.querySelector('title[data-i18n]');
  if (titleElement) {
    const key = titleElement.getAttribute('data-i18n');
    const message = getMessage(key);
    if (message) {
      document.title = message;
    }
  }
}

let webdavClient = null;
let currentPath = '/';
let currentViewMode = 'list'; // 默认视图模式：list 或 grid

// DOM元素
const serverUrlInput = document.getElementById('server-url');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const autoConnectCheckbox = document.getElementById('auto-connect');
const connectBtn = document.getElementById('connect-btn');
const connectionForm = document.querySelector('.connection-form');
const fileExplorer = document.querySelector('.file-explorer');
const currentPathElement = document.getElementById('current-path');
const parentDirBtn = document.getElementById('parent-dir-btn');
const refreshBtn = document.getElementById('refresh-btn');
const fileList = document.getElementById('file-list');
const fileUpload = document.getElementById('file-upload');
// 移除: const uploadBtn = document.getElementById('upload-btn');
const connectionStatus = document.getElementById('connection-status');
const toastContainer = document.getElementById('toast-container');
const listViewBtn = document.getElementById('list-view-btn');
const gridViewBtn = document.getElementById('grid-view-btn');
const logoutBtn = document.getElementById('logout-btn');
const previewOverlay = document.getElementById('preview-overlay');
const previewContent = document.getElementById('preview-content');
const previewTitle = document.getElementById('preview-title');
const previewClose = document.getElementById('preview-close');
const toolbarUploadBtn = document.getElementById('toolbar-upload-btn');
const toolbarNewFolderBtn = document.getElementById('toolbar-new-folder-btn');
const elasticNewFolder = document.getElementById('elastic-new-folder');

// 预览相关常量
const PREVIEWABLE_IMAGE_TYPES = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp'];
const PREVIEWABLE_PDF = ['pdf'];

// Toast通知系统
function showToast(messageKey, type = 'default', duration = 3000) {
  // 创建toast元素
  const toast = document.createElement('div');
  toast.className = `toast ${type}`;
  // 如果messageKey是国际化键，则获取对应文本，否则直接使用
  const message = getMessage(messageKey) !== messageKey ? getMessage(messageKey) : messageKey;
  toast.textContent = message;
  
  // 添加到容器
  toastContainer.appendChild(toast);
  
  // 触发重绘，然后添加show类
  setTimeout(() => {
    toast.classList.add('show');
  }, 10);
  
  // 设置定时器移除toast
  setTimeout(() => {
    toast.classList.remove('show');
    
    // 动画结束后移除元素
    toast.addEventListener('transitionend', () => {
      if (toast.parentNode) {
        toast.parentNode.removeChild(toast);
      }
    });
  }, duration);
  
  return toast;
}

// 检查文件是否可预览
function isPreviewable(fileName) {
  if (!fileName) return false;
  
  const extension = fileName.split('.').pop().toLowerCase();
  return PREVIEWABLE_IMAGE_TYPES.includes(extension) || PREVIEWABLE_PDF.includes(extension);
}

// 检查文件是否是图片
function isImage(fileName) {
  if (!fileName) return false;
  
  const extension = fileName.split('.').pop().toLowerCase();
  return PREVIEWABLE_IMAGE_TYPES.includes(extension);
}

// 检查文件是否是PDF
function isPDF(fileName) {
  if (!fileName) return false;
  
  const extension = fileName.split('.').pop().toLowerCase();
  return PREVIEWABLE_PDF.includes(extension);
}

// 预览文件
async function previewFile(path, fileName) {
  if (!webdavClient) {
    showToast('请先连接到WebDAV服务器', 'warning');
    return;
  }
  
  try {
    showToast(`正在加载预览: ${fileName}...`, 'info');
    
    // 清空预览内容
    previewContent.innerHTML = '';
    previewTitle.textContent = fileName;
    
    // 获取文件内容
    const blob = await webdavClient.downloadFile(path);
    
    // 验证blob是否有效
    if (!blob || !(blob instanceof Blob)) {
      throw new Error('文件内容无效，无法创建预览');
    }
    
    console.log('预览文件信息:', {
      name: fileName,
      size: blob.size,
      type: blob.type,
      lastModified: blob.lastModified
    });
    
    const url = URL.createObjectURL(blob);
    
    // 根据文件类型创建预览元素
    if (isImage(fileName)) {
      const img = document.createElement('img');
      img.className = 'preview-image';
      img.src = url;
      img.alt = fileName;
      
      // 添加图片加载错误处理
      img.onerror = () => {
        showToast('图片加载失败，可能格式不支持', 'error');
        URL.revokeObjectURL(url);
      };
      
      img.onload = () => {
        console.log('图片预览加载成功');
      };
      
      previewContent.appendChild(img);
    } else if (isPDF(fileName)) {
      const iframe = document.createElement('iframe');
      iframe.className = 'preview-pdf';
      iframe.src = url;
      previewContent.appendChild(iframe);
    }
    
    // 显示预览
    previewOverlay.classList.add('show');
    
    // 添加关闭事件
    const closePreview = () => {
      previewOverlay.classList.remove('show');
      URL.revokeObjectURL(url);
    };
    
    previewClose.onclick = closePreview;
    
    // 点击背景关闭预览
    previewOverlay.onclick = (e) => {
      if (e.target === previewOverlay) {
        closePreview();
      }
    };
    
    // ESC键关闭预览
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && previewOverlay.classList.contains('show')) {
        closePreview();
      }
    });
    
  } catch (error) {
    console.error('预览文件失败:', error);
    showToast(`预览文件失败: ${error.message}`, 'error');
    
    // 清空预览内容
    previewContent.innerHTML = `
      <div style="text-align: center; color: #e74c3c; padding: 20px;">
        <div style="font-size: 16px; margin-bottom: 8px;">❌</div>
        <div>预览失败</div>
        <div style="font-size: 12px; margin-top: 4px;">${error.message}</div>
      </div>
    `;
    
    // 仍然显示预览窗口，但显示错误信息
    previewOverlay.classList.add('show');
    
    // 添加关闭事件
    const closePreview = () => {
      previewOverlay.classList.remove('show');
    };
    
    previewClose.onclick = closePreview;
    
    // 点击背景关闭预览
    previewOverlay.onclick = (e) => {
      if (e.target === previewOverlay) {
        closePreview();
      }
    };
  }
}

// 切换视图模式
function switchViewMode(mode) {
  currentViewMode = mode;
  
  if (mode === 'list') {
    fileList.className = 'file-list list-view';
    listViewBtn.classList.add('active');
    gridViewBtn.classList.remove('active');
  } else {
    fileList.className = 'file-list grid-view';
    gridViewBtn.classList.add('active');
    listViewBtn.classList.remove('active');
  }
  
  // 保存视图模式偏好到本地存储
  chrome.storage.local.set({ viewMode: mode });
}

// 创建Lucide图标的辅助函数
function createLucideIcon(iconName) {
  return `<i data-lucide="${iconName}"></i>`;
}

// 定义文件类型图标
const FILE_ICONS = {
  // 图片文件
  'jpg': 'image',
  'jpeg': 'image',
  'png': 'image',
  'gif': 'image',
  'svg': 'image',
  'webp': 'image',
  'bmp': 'image',
  // 文档文件
  'doc': 'file-text',
  'docx': 'file-text',
  'txt': 'file-text',
  'pdf': 'file-text',
  'md': 'file-text',
  'rtf': 'file-text',
  // 表格文件
  'xls': 'sheet',
  'xlsx': 'sheet',
  'csv': 'sheet',
  // 演示文件
  'ppt': 'presentation',
  'pptx': 'presentation',
  // 压缩文件
  'zip': 'archive',
  'rar': 'archive',
  '7z': 'archive',
  'tar': 'archive',
  'gz': 'archive',
  // 代码文件
  'html': 'code',
  'css': 'code',
  'js': 'code',
  'json': 'code',
  'php': 'code',
  'py': 'code',
  'java': 'code',
  'c': 'code',
  'cpp': 'code',
  // 音频文件
  'mp3': 'music',
  'wav': 'music',
  'ogg': 'music',
  'flac': 'music',
  // 视频文件
  'mp4': 'video',
  'avi': 'video',
  'mov': 'video',
  'mkv': 'video',
  'webm': 'video',
  // 默认图标
  'default': 'file'
};

// 获取文件图标
function getFileIcon(fileName) {
  if (!fileName) return createLucideIcon(FILE_ICONS.default);
  
  const extension = fileName.split('.').pop().toLowerCase();
  const iconName = FILE_ICONS[extension] || FILE_ICONS.default;
  return createLucideIcon(iconName);
}

// 自动保存配置的防抖函数
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

// 显示连接状态
function showConnectionStatus(message, type) {
  if (type === 'error') {
    showToast(message, 'error');
  } else if (type === 'connecting') {
    showToast('正在连接...', 'info');
  } else if (type === 'success') {
    showToast(message, 'success');
  } else {
    showToast(message);
  }
  
  // 仍然更新状态显示，但会在连接后隐藏
  connectionStatus.textContent = message;
  connectionStatus.className = 'connection-status';
  
  if (type) {
    connectionStatus.classList.add(type);
  }
}

// 清除连接状态
function clearConnectionStatus() {
  connectionStatus.textContent = '';
  connectionStatus.className = 'connection-status hidden';
}

// 自动保存配置
const autoSaveConfig = debounce(() => {
  const serverUrl = serverUrlInput.value.trim();
  const username = usernameInput.value.trim();
  const password = passwordInput.value;
  const shouldAutoConnect = autoConnectCheckbox.checked;
  
  // 只有当至少有服务器地址时才保存
  if (serverUrl) {
    chrome.storage.local.set({
      serverUrl,
      username,
      password,
      shouldAutoConnect
    }, () => {
      console.log('配置已自动保存到本地');
      console.log(`自动连接设置: ${shouldAutoConnect ? '启用' : '禁用'}`);
    });
  }
}, 500); // 500毫秒的延迟

// 初始化
document.addEventListener('DOMContentLoaded', () => {
  // 初始化国际化
  initializeI18n();
  
  // 从本地存储中加载配置
  chrome.storage.local.get(['serverUrl', 'username', 'password', 'shouldAutoConnect', 'viewMode', 'autoConnectFailCount', 'lastFailTime'], (result) => {
    // 如果有保存的视图模式，应用它
    if (result.viewMode) {
      switchViewMode(result.viewMode);
    }
    
    if (result.serverUrl) {
      serverUrlInput.value = result.serverUrl;
      usernameInput.value = result.username || '';
      passwordInput.value = result.password || '';
      
      // 设置自动连接复选框状态
      if (result.shouldAutoConnect !== undefined) {
        autoConnectCheckbox.checked = result.shouldAutoConnect;
      }
      
      // 检查所有输入字段是否都已填写
      const allFieldsFilled = result.serverUrl && result.username && result.password;
      
      // 检查自动连接失败次数和时间限制
      const failCount = result.autoConnectFailCount || 0;
      const lastFailTime = result.lastFailTime || 0;
      const currentTime = Date.now();
      const timeSinceLastFail = currentTime - lastFailTime;
      const FAIL_RESET_TIME = 30 * 60 * 1000; // 30分钟后重置失败计数
      const MAX_FAIL_COUNT = 3; // 最大失败次数
      
      // 如果距离上次失败超过30分钟，重置失败计数
      if (timeSinceLastFail > FAIL_RESET_TIME && failCount > 0) {
        chrome.storage.local.set({ autoConnectFailCount: 0, lastFailTime: 0 });
        console.log('自动连接失败计数已重置');
      }
      
      // 根据复选框状态和失败次数决定是否自动连接
      if (result.shouldAutoConnect && allFieldsFilled) {
        if (failCount >= MAX_FAIL_COUNT && timeSinceLastFail <= FAIL_RESET_TIME) {
          // 失败次数过多，自动禁用自动连接
          autoConnectCheckbox.checked = false;
          chrome.storage.local.set({ shouldAutoConnect: false });
          showConnectionStatus(`自动连接已禁用（连续失败${failCount}次），请检查连接信息后手动连接`, 'error');
          console.log(`自动连接已禁用：连续失败${failCount}次`);
        } else {
          showConnectionStatus('正在自动连接...', 'connecting');
          console.log('自动连接到WebDAV服务器...');
          // 延迟一点时间再连接，确保DOM已完全加载
          setTimeout(() => {
            connectToServer(true); // true表示这是自动连接
          }, 500);
        }
      } else if (result.shouldAutoConnect && !allFieldsFilled) {
        showConnectionStatus('请填写所有连接信息后手动连接', 'error');
        console.log('无法自动连接：缺少连接信息');
      } else {
        showConnectionStatus('已禁用自动连接，请手动连接', 'info');
      }
    }
  });

  // 连接按钮点击事件
  connectBtn.addEventListener('click', () => connectToServer(false)); // false表示这是手动连接
  
  // 上级目录按钮点击事件
  parentDirBtn.addEventListener('click', navigateToParentDirectory);
  
  // 刷新按钮点击事件
  refreshBtn.addEventListener('click', () => loadDirectory(currentPath));
  
  // 上传文件按钮点击事件
  // 移除: uploadBtn.addEventListener('click', uploadFiles);
  
  // 工具栏：点击触发隐藏的文件选择
  toolbarUploadBtn.addEventListener('click', () => {
    // 在根目录可打开选择框，但最终由上传逻辑拦截
    fileUpload.click();
  });
  
  // 工具栏：新建文件夹按钮
  toolbarNewFolderBtn.addEventListener('click', () => {
    const folderName = prompt('请输入文件夹名称:');
    if (folderName && folderName.trim()) {
      const cleanName = folderName.trim().replace(/[<>:"/\\|?*]/g, '_'); // 清理非法字符
      if (cleanName !== folderName) {
        showToast(`文件夹名称已清理为: ${cleanName}`, 'info');
      }
      // 修复路径拼接，避免双斜杠
      const base = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;
      const folderPath = `${base}/${cleanName}`;
      console.log('创建文件夹路径:', folderPath);
      createDirectory(folderPath);
    }
  });
  
  // 选择文件后自动上传
  fileUpload.addEventListener('change', uploadFiles);
  
  // 视图切换按钮点击事件
  listViewBtn.addEventListener('click', () => switchViewMode('list'));
  gridViewBtn.addEventListener('click', () => switchViewMode('grid'));
  
  // 退出按钮点击事件
  logoutBtn.addEventListener('click', logout);
  
  // 文件列表滚动检测 - 弹性新建文件夹按钮
  fileList.addEventListener('scroll', () => {
    const scrollTop = fileList.scrollTop;
    const threshold = 20; // 滚动阈值，更敏感
    
    if (scrollTop <= threshold) {
      // 滚动到顶部附近，显示弹性按钮
      if (!elasticNewFolder.classList.contains('show')) {
        elasticNewFolder.classList.remove('hidden');
        // 使用 requestAnimationFrame 确保 DOM 更新后再添加 show 类
        requestAnimationFrame(() => {
          elasticNewFolder.classList.add('show');
        });
      }
    } else {
      // 滚动离开顶部，隐藏弹性按钮
      if (elasticNewFolder.classList.contains('show')) {
        elasticNewFolder.classList.remove('show');
        // 等待动画完成后隐藏元素
        setTimeout(() => {
          if (!elasticNewFolder.classList.contains('show')) {
            elasticNewFolder.classList.add('hidden');
          }
        }, 400); // 与 CSS transition 时间匹配
      }
    }
  });
  
  // 弹性新建文件夹按钮点击事件
  elasticNewFolder.addEventListener('click', (e) => {
    if (e.target.closest('.elastic-new-folder-btn')) {
      const folderName = prompt('请输入文件夹名称:');
      if (folderName && folderName.trim()) {
        const cleanName = folderName.trim().replace(/[<>:"/\\|?*]/g, '_'); // 清理非法字符
        if (cleanName !== folderName) {
          showToast(`文件夹名称已清理为: ${cleanName}`, 'info');
        }
        // 修复路径拼接，避免双斜杠
        const base = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;
        const folderPath = `${base}/${cleanName}`;
        console.log('创建文件夹路径:', folderPath);
        createDirectory(folderPath);
      }
    }
  });
  
  // 初始化时隐藏弹性新建文件夹按钮
  elasticNewFolder.classList.add('hidden');
  
  // 路径输入框回车事件
  currentPathElement.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      const newPath = currentPathElement.value.trim();
      if (newPath && newPath !== currentPath) {
        console.log('手动跳转到路径:', newPath);
        loadDirectory(newPath);
      }
    }
  });
  
  // 给输入框添加自动保存事件
  serverUrlInput.addEventListener('input', autoSaveConfig);
  usernameInput.addEventListener('input', autoSaveConfig);
  passwordInput.addEventListener('input', autoSaveConfig);
  autoConnectCheckbox.addEventListener('change', autoSaveConfig);
  
  // 任何输入框变化时，清除连接状态
  serverUrlInput.addEventListener('input', clearConnectionStatus);
  usernameInput.addEventListener('input', clearConnectionStatus);
  passwordInput.addEventListener('input', clearConnectionStatus);

  // 初始化时隐藏弹性新建文件夹按钮
  elasticNewFolder.classList.add('hidden');
  
  // 初始化 Lucide 图标
  if (initializeLucideIcons()) {
    console.log('Lucide 图标初始化成功');
  } else {
    console.log('Lucide 图标初始化失败，将重试...');
    refreshIcons();
  }
});

/**
 * 连接到WebDAV服务器
 * @param {boolean} isAutoConnect - 是否是自动连接
 */
async function connectToServer(isAutoConnect = false) {
  const serverUrl = serverUrlInput.value.trim();
  const username = usernameInput.value.trim();
  const password = passwordInput.value;
  const shouldAutoConnect = autoConnectCheckbox.checked;

  console.log('=== WebDAV连接开始 ===');
  console.log('连接参数:');
  console.log('- 服务器URL:', serverUrl);
  console.log('- 用户名:', username);
  console.log('- 密码长度:', password.length);
  console.log('- 是否自动连接:', isAutoConnect);
  console.log('- 自动连接设置:', shouldAutoConnect);
  
  // 检查所有字段是否已填写
  if (!serverUrl || !username || !password) {
    const missingFields = [];
    if (!serverUrl) missingFields.push('服务器地址');
    if (!username) missingFields.push('用户名');
    if (!password) missingFields.push('密码');
    
    const errorMessage = `请填写 ${missingFields.join('、')}`;
    
    console.log('连接失败: 参数不完整 -', errorMessage);
    
    if (!isAutoConnect) {
      showToast(errorMessage, 'error');
    } else {
      console.log(`自动连接失败：${errorMessage}`);
      showToast(`自动连接失败：${errorMessage}`, 'error');
    }
    return;
  }
  
  if (!isAutoConnect) {
      showToast('connecting', 'info');
    }
  
  try {
    console.log('开始测试WebDAV连接...');
    console.log('服务器URL:', serverUrl);
    console.log('用户名:', username);

    
    // 创建WebDAV客户端实例
    console.log('正在创建WebDAVClient实例...');
    webdavClient = new WebDAVClient(serverUrl, username, password);
    console.log('WebDAVClient实例创建成功');
    
    // 智能检测WebDAV服务器类型和路径
    let actualRootPath = '/';
    let serverType = 'generic';
    
    if (serverUrl.includes('jianguoyun.com') || serverUrl.includes('nutstore.net')) {
      serverType = 'jianguoyun';
      actualRootPath = '/';
      console.log('检测到坚果云服务，使用根路径:', actualRootPath);
    } else if (serverUrl.includes('nextcloud') || serverUrl.includes('owncloud')) {
      serverType = 'nextcloud';
      actualRootPath = '/remote.php/dav/files/' + username + '/';
      console.log('检测到Nextcloud/ownCloud服务，使用用户路径:', actualRootPath);
    } else {
      console.log('通用WebDAV服务，使用默认根路径:', actualRootPath);
    }
    
    // 测试连接 - 先测试根目录，如果失败再测试用户目录
    let testItems;
    try {
      console.log('尝试连接到:', actualRootPath);
      console.log('调用webdavClient.listDirectory...');
      testItems = await webdavClient.listDirectory(actualRootPath);
      console.log('连接测试成功！');
      console.log('返回的目录项数量:', testItems ? testItems.length : 0);
      console.log('目录内容详情:', testItems);
    } catch (error) {
      console.log('连接测试失败:');
      console.log('- 错误类型:', error.constructor.name);
      console.log('- 错误消息:', error.message);
      console.log('- 错误堆栈:', error.stack);
      
      // 根据服务器类型尝试备用路径
      let alternativePaths = [];
      
      if (serverType === 'jianguoyun') {
        // 坚果云的备用路径
        alternativePaths = ['/'];
      } else if (serverType === 'nextcloud') {
        // Nextcloud/ownCloud的备用路径
        alternativePaths = [
          '/remote.php/webdav/',
          '/remote.php/dav/files/' + username + '/',
          '/'
        ];
      } else {
        // 通用WebDAV服务器的备用路径
        alternativePaths = [
          '/webdav/',
          '/dav/',
          '/remote.php/webdav/',
          '/'
        ];
      }
      
      let connected = false;
      for (const altPath of alternativePaths) {
        try {
          console.log('尝试备用路径:', altPath);
          testItems = await webdavClient.listDirectory(altPath);
          actualRootPath = altPath;
          console.log('备用路径连接成功:', altPath);
          console.log('备用路径返回项数量:', testItems ? testItems.length : 0);
          connected = true;
          break;
        } catch (altError) {
          console.log('备用路径失败:', altPath);
          console.log('- 错误:', altError.message);
        }
      }
      
      if (!connected) {
        throw error;
      }
    }
    
    // 连接成功
    console.log('=== WebDAV连接成功 ===');
    console.log('最终根目录:', actualRootPath);
    console.log('服务器类型:', serverType);
    console.log('目录项总数:', testItems ? testItems.length : 0);
    
    // 显示文件浏览器
    connectionForm.classList.add('hidden');
    fileExplorer.classList.remove('hidden');
    
    // 设置当前路径为实际根目录
    currentPath = actualRootPath;
    currentPathElement.value = currentPath;
    
    // 连接成功提示
    showToast('connectSuccess', 'success');
    
    // 加载根目录文件列表
    console.log('开始加载根目录文件列表...');
    
    // 显示加载中提示
    fileList.innerHTML = `
      <div class="file-item" style="text-align: center; color: #7f8c8d; padding: 20px;">
        <div style="font-size: 16px; margin-bottom: 8px;">⏳</div>
        <div>正在加载文件列表...</div>
      </div>
    `;
    
    try {
      await loadDirectory(actualRootPath);
      console.log('根目录文件列表加载完成');
    } catch (loadError) {
      console.error('加载根目录失败:', loadError);
      fileList.innerHTML = `
        <div class="file-item" style="text-align: center; color: #e74c3c; padding: 20px;">
          <div style="font-size: 16px; margin-bottom: 8px;">❌</div>
          <div>加载文件列表失败</div>
          <div style="font-size: 12px; margin-top: 4px;">${loadError.message}</div>
          <button onclick="loadDirectory('${actualRootPath}')" style="margin-top: 10px; padding: 5px 10px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer;">重新加载</button>
        </div>
      `;
    }
    
    // 连接成功后自动保存配置到本地，并保留自动连接设置
    chrome.storage.local.set({
      serverUrl,
      username,
      password,
      shouldAutoConnect // 保持用户的自动连接设置
    }, () => {
      console.log('配置已保存到本地，自动连接设置已更新');
    });
    // 连接成功时重置失败计数
    if (isAutoConnect) {
      chrome.storage.local.set({ autoConnectFailCount: 0, lastFailTime: 0 }, () => {
        console.log('自动连接成功，失败计数已重置');
      });
    }
  } catch (error) {
    console.error('WebDAV连接失败:', error);
    console.error('错误类型:', error.constructor.name);
    console.error('错误消息:', error.message);
    console.error('错误堆栈:', error.stack);
    
    let errorMessage = '连接失败';
    if (error.message.includes('Failed to fetch')) {
      errorMessage = '网络连接失败，请检查服务器地址和网络连接';
    } else if (error.message.includes('401')) {
      errorMessage = '认证失败，请检查用户名和密码';
    } else if (error.message.includes('404')) {
      errorMessage = '服务器路径不存在';
    } else if (error.message.includes('CORS')) {
      errorMessage = 'CORS跨域问题，请检查服务器CORS配置';
    } else {
      errorMessage = `连接失败: ${error.message}`;
    }
    
    // 如果是自动连接失败，记录失败次数
    if (isAutoConnect) {
      chrome.storage.local.get(['autoConnectFailCount'], (result) => {
        const currentFailCount = (result.autoConnectFailCount || 0) + 1;
        const currentTime = Date.now();
        
        chrome.storage.local.set({
          autoConnectFailCount: currentFailCount,
          lastFailTime: currentTime
        }, () => {
          console.log(`自动连接失败次数: ${currentFailCount}`);
          
          if (currentFailCount >= 3) {
            showToast(`自动连接连续失败${currentFailCount}次，已自动禁用。请检查连接信息后手动连接`, 'error', 5000);
          } else {
            showToast('autoConnectFailed', 'error');
          }
        });
      });
    } else {
      // 手动连接失败时显示详细错误信息
      showToast('connectError', 'error');
    }
  }
}

/**
 * 保存WebDAV配置到Chrome存储
 */
function saveConfig() {
  const serverUrl = serverUrlInput.value.trim();
  const username = usernameInput.value.trim();
  const password = passwordInput.value;
  
  // 检查是否所有字段都已填写
  const allFieldsFilled = serverUrl && username && password;
  
  chrome.storage.sync.set({
    serverUrl,
    username,
    password,
    // 只有所有字段都填写时才设置为自动连接
    shouldAutoConnect: allFieldsFilled
  }, () => {
    console.log('配置已保存');
  });
}

/**
 * 加载指定目录的内容
 * @param {string} path - 目录路径
 */
async function loadDirectory(path) {
  if (!webdavClient) {
    showToast('请先连接到WebDAV服务器', 'warning');
    return;
  }
  
  try {
    console.log('=== 开始加载目录 ===');
    console.log('目标路径:', path);
    console.log('当前路径:', currentPath);
    
    // 更新当前路径
    currentPath = path;
    currentPathElement.value = currentPath;
    console.log('路径已更新为:', currentPath);
    
    // 获取目录内容
    console.log('调用webdavClient.listDirectory...');
    const startTime = Date.now();
    let items;
    try {
      items = await webdavClient.listDirectory(path);
    } catch (listError) {
      console.error('WebDAV目录列表获取失败:', listError);
      showToast(`获取目录内容失败: ${listError.message}`, 'error');
      return;
    }
    const endTime = Date.now();
    
    console.log('=== 目录加载完成 ===');
    console.log('耗时:', (endTime - startTime) + 'ms');
    console.log('返回项目数量:', items ? items.length : 0);
    console.log('items类型:', typeof items);
    console.log('items是否为数组:', Array.isArray(items));
    
    // 确保items是有效的数组
    if (!items) {
      console.warn('WebDAV返回了null/undefined结果');
      items = [];
    } else if (!Array.isArray(items)) {
      console.error('WebDAV返回的不是数组:', items);
      showToast('服务器返回数据格式错误', 'error');
      return;
    }
    
    console.log('目录内容详情:');
    if (items.length > 0) {
      items.forEach((item, index) => {
        console.log(`  [${index}] ${item.isDirectory ? '[DIR]' : '[FILE]'} ${item.name} (${item.path})`);
        if (!item.isDirectory) {
          console.log(`       大小: ${formatFileSize(item.size)}, 修改时间: ${item.lastModified}`);
        }
      });
    } else {
      console.log('  目录为空或无有效项目');
    }
    
    // 清空文件列表
    console.log('清空文件列表DOM...');
    fileList.innerHTML = '';
    
    // 添加项目到文件列表
    console.log('开始渲染文件项...');
    let renderedCount = 0;
    items.forEach((item, index) => {
      try {
        // 跳过当前目录
        if (item.path === path) {
          console.log(`跳过当前目录项: ${item.path}`);
          return;
        }
        
        console.log(`渲染第${index}项: ${item.name}`);
        
        const fileItem = document.createElement('div');
        fileItem.className = 'file-item';
        
        // 创建主信息容器（图标和文件名）
        const mainInfo = document.createElement('div');
        mainInfo.className = 'file-main-info';
        
        // 图标
        const fileIcon = document.createElement('span');
        fileIcon.className = 'file-icon';
        const iconHtml = item.isDirectory ? createLucideIcon('folder') : getFileIcon(item.name);
        console.log(`图标HTML: ${iconHtml}`);
        fileIcon.innerHTML = iconHtml;
        mainInfo.appendChild(fileIcon);
        
        // 文件名
        const fileName = document.createElement('span');
        fileName.className = 'file-name';
        fileName.textContent = item.name;
        mainInfo.appendChild(fileName);
        
        // 文件操作
        const fileActions = document.createElement('div');
        fileActions.className = 'file-actions';
        
        // 点击文件/文件夹
        fileItem.addEventListener('click', (e) => {
          if (e.target === fileItem || e.target === fileIcon || e.target === fileName || e.target === mainInfo) {
            if (item.isDirectory) {
              // 导航到子目录
              loadDirectory(item.path);
            } else if (isPreviewable(item.name)) {
              // 预览文件
              previewFile(item.path, item.name);
            } else {
              // 下载文件
              downloadFile(item.path, item.name);
            }
          }
        });
        
        // 删除按钮
        const deleteBtn = document.createElement('button');
        deleteBtn.className = 'btn-icon';
        deleteBtn.innerHTML = createLucideIcon('trash-2');
        deleteBtn.setAttribute('data-tooltip', '删除');
        deleteBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          if (confirm(`确定要删除 ${item.name} 吗?`)) {
            deleteItem(item.path);
          }
        });
        fileActions.appendChild(deleteBtn);
        

        
        // 如果是文件，添加下载按钮
        if (!item.isDirectory) {
          const downloadBtn = document.createElement('button');
          downloadBtn.className = 'btn-icon';
          downloadBtn.innerHTML = createLucideIcon('download');
          downloadBtn.setAttribute('data-tooltip', '下载文件');
          downloadBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            downloadFile(item.path, item.name);
          });
          fileActions.appendChild(downloadBtn);
          
          // 如果是可预览的文件类型，添加预览按钮
          if (isPreviewable(item.name)) {
            const previewBtn = document.createElement('button');
            previewBtn.className = 'btn-icon';
            previewBtn.innerHTML = isImage(item.name) ? createLucideIcon('eye') : createLucideIcon('book-open');
            previewBtn.setAttribute('data-tooltip', '预览');
            previewBtn.addEventListener('click', (e) => {
              e.stopPropagation();
              previewFile(item.path, item.name);
            });
            fileActions.appendChild(previewBtn);
          }
        }
        
        mainInfo.appendChild(fileActions);
        fileItem.appendChild(mainInfo);
        
        // 添加文件详细信息（大小和日期）
        const fileDetails = document.createElement('div');
        fileDetails.className = 'file-details';
        
        // 大小信息
        const sizeInfo = document.createElement('div');
        sizeInfo.className = 'file-size-info';
        
        if (item.isDirectory) {
          sizeInfo.textContent = '文件夹';
        } else {
          sizeInfo.textContent = formatFileSize(item.size);
        }
        
        fileDetails.appendChild(sizeInfo);
        
        // 修改日期信息
        const modifiedInfo = document.createElement('div');
        modifiedInfo.className = 'file-modified-info';
        modifiedInfo.textContent = formatDate(item.lastModified);
        fileDetails.appendChild(modifiedInfo);
        
        fileItem.appendChild(fileDetails);
        
        // 添加到列表
        fileList.appendChild(fileItem);
        renderedCount++;
        console.log(`文件项已添加到DOM: ${item.name}`);
        
        // 网格视图模式下的大小显示
        if (currentViewMode === 'grid') {
          // 创建文件信息容器（用于网格视图）
          const fileInfo = document.createElement('div');
          fileInfo.className = 'file-info';
          
          // 大小信息
          const sizeElement = document.createElement('span');
          sizeElement.className = 'file-size';
          sizeElement.textContent = item.isDirectory ? '文件夹' : formatFileSize(item.size);
          fileInfo.appendChild(sizeElement);
          
          // 在网格视图中，就不显示修改日期了，因为空间有限
          
          fileItem.appendChild(fileInfo);
        }
      } catch (itemError) {
        console.error(`渲染文件项失败 [${index}] ${item.name}:`, itemError);
        // 继续渲染其他项目
      }
    });
    
    console.log(`成功渲染了 ${renderedCount} 个文件项`);
    
    // 如果没有文件项，显示空目录提示
    if (renderedCount === 0) {
      console.log('目录为空，添加空状态提示...');
      const emptyMessage = document.createElement('div');
      emptyMessage.className = 'file-item empty-directory-message';
      emptyMessage.style.cssText = `
        text-align: center;
        color: #7f8c8d;
        font-style: italic;
        padding: 20px;
        border: 2px dashed #ddd;
        border-radius: 8px;
        margin: 10px 0;
        background: #f9f9f9;
      `;
      emptyMessage.innerHTML = `
        <div style="font-size: 16px; margin-bottom: 8px;">📁</div>
        <div>此目录为空</div>
        <div style="font-size: 12px; margin-top: 4px;">您可以上传文件或创建文件夹</div>
      `;
      fileList.appendChild(emptyMessage);
    }
    

    
    // 刷新Lucide图标
    console.log('刷新Lucide图标...');
    refreshIcons();
    
    // 上传入口提示（不禁用，始终可点击选择文件；在上传逻辑内做根目录拦截）
    const atRoot = currentPath === '/';
    const label = document.querySelector('label[for="file-upload"] .file-input-label') || document.querySelector('label[for="file-upload"]');
    if (label) label.setAttribute('data-tooltip', atRoot ? '已在根目录，选择后将提示进入文件夹再上传' : '选择文件后将立即上传');
    
    console.log('=== 目录加载和渲染完成 ===');
    console.log('最终DOM子元素数量:', fileList.children.length);
    
  } catch (error) {
    console.error('加载目录失败:', error);
    console.error('错误堆栈:', error.stack);
    showToast(`加载目录失败: ${error.message}`, 'error');
  }
}

/**
 * 导航到上级目录
 */
function navigateToParentDirectory() {
  if (currentPath === '/') return;
  
  const parts = currentPath.split('/').filter(Boolean);
  parts.pop();
  const parentPath = '/' + parts.join('/');
  
  loadDirectory(parentPath);
}


async function uploadFiles() {
  if (!webdavClient) {
    showToast('请先连接到WebDAV服务器', 'warning');
    return;
  }
  
  // 在根目录禁止上传（需先进入目标文件夹）
  if (currentPath === '/') {
    showToast('请先进入目标文件夹后再上传', 'warning');
    // 重置选择，避免下次不触发change
    fileUpload.value = '';
    return;
  }


  const files = fileUpload.files;
  if (files.length === 0) {
    showToast('请选择要上传的文件', 'warning');
    return;
  }
  
  try {
    showToast('uploadStarting', 'info');
    console.log('开始批量上传，目标目录:', currentPath);
    
    let successCount = 0;
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      // 规范化路径拼接，避免出现双斜杠
      const base = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;
      const filePath = `${base}/${file.name}`;
      
      console.log(`[上传] 开始上传 (${i+1}/${files.length}) ->`, filePath, '文件名:', file.name, '大小:', file.size);
      
      try {
        await webdavClient.uploadFile(filePath, file);
        console.log(`[上传] 成功 ->`, filePath);
        successCount++;
      } catch (singleError) {
        console.error(`[上传] 失败 -> ${filePath}:`, singleError);
        showToast('uploadFailed', 'error');
      }
    }
    
    // 重置文件选择框，确保可再次选择相同文件触发change
    fileUpload.value = '';

    if (successCount > 0) {
      showToast('uploadSuccess', 'success');
      loadDirectory(currentPath);
    } else {
      showToast('uploadAllFailed', 'error');
    }
  } catch (error) {
    console.error('上传文件失败(总体):', error);
    showToast('uploadFailed', 'error');
  }
}

/**
 * 下载文件
 * @param {string} path - 文件路径
 * @param {string} fileName - 文件名
 */
async function downloadFile(path, fileName) {
  if (!webdavClient) {
    showToast('请先连接到WebDAV服务器', 'warning');
    return;
  }
  
  try {
    showToast('downloadStarting', 'info');
    
    const blob = await webdavClient.downloadFile(path);
    
    // 验证blob是否有效
    if (!blob || !(blob instanceof Blob)) {
      throw new Error('文件内容无效，无法下载');
    }
    
    console.log('下载文件信息:', {
      name: fileName,
      size: blob.size,
      type: blob.type
    });
    
    // 创建下载链接
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    
    showToast('downloadSuccess', 'success');
  } catch (error) {
    console.error('下载文件失败:', error);
    showToast('downloadFailed', 'error');
  }
}

/**
 * 删除项目（文件或目录）
 * @param {string} path - 项目路径
 */
async function deleteItem(path) {
  if (!webdavClient) {
    showToast('请先连接到WebDAV服务器', 'warning');
    return;
  }
  
  try {
    console.log('开始删除项目:', path);
    await webdavClient.delete(path);
    showToast('deleteSuccess', 'success');
    console.log('删除成功:', path);
    loadDirectory(currentPath);
  } catch (error) {
    console.error('删除失败:', error);
    console.error('删除路径:', path);
    console.error('错误详情:', {
      name: error.name,
      message: error.message,
      stack: error.stack
    });
    
    // 根据错误类型提供更友好的提示
    let errorMessage = error.message;
    
    if (error.message.includes('403')) {
      // 检查是否是根目录删除
      if (path === '/' || path === '/我的坚果云' || path === '/我的坚果云/') {
        errorMessage = '根目录无法删除，这是系统保护的安全措施';
      } else {
        errorMessage = '没有权限删除此项目，请检查权限设置';
      }
    } else if (error.message.includes('404')) {
      errorMessage = '要删除的项目不存在，可能已被其他用户删除';
    } else if (error.message.includes('409')) {
      errorMessage = '无法删除：目录不为空或存在冲突';
    } else if (error.message.includes('500')) {
      errorMessage = '服务器内部错误，请稍后重试';
    }
    
    showToast('deleteFailed', 'error');
  }
}

/**
 * 创建目录
 * @param {string} path - 目录路径
 */
async function createDirectory(path) {
  if (!webdavClient) {
    showToast('请先连接到WebDAV服务器', 'warning');
    return;
  }
  
  if (!path || !path.trim()) {
    showToast('目录路径不能为空', 'error');
    return;
  }
  
  try {
    showToast('createFolderStarting', 'info');
    console.log('开始创建目录:', path);
    
    await webdavClient.createDirectory(path);
    showToast('createFolderSuccess', 'success');
    console.log('目录创建成功:', path);
    
    // 刷新当前目录显示
    loadDirectory(currentPath);
  } catch (error) {
    console.error('创建文件夹失败:', error);
    
    // 根据错误类型提供更友好的提示
    let errorMessage = error.message;
    if (error.message.includes('父目录')) {
      errorMessage = '父目录不存在，请先创建父目录';
    } else if (error.message.includes('409')) {
      errorMessage = '文件夹已存在，请使用其他名称';
    } else if (error.message.includes('403')) {
      errorMessage = '没有权限在此位置创建文件夹';
    }
    
    showToast('createFolderFailed', 'error');
  }
}

/**
 * 格式化文件大小为人类可读格式
 * @param {number} bytes - 文件大小（字节）
 * @returns {string} 格式化后的大小
 */
function formatFileSize(bytes) {
  if (bytes === 0 || bytes === undefined || bytes === null) return '0 B';
  
  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  
  return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + ' ' + units[i];
}

/**
 * 格式化日期为相对时间或更友好的格式
 * @param {string} dateString - 日期字符串
 * @returns {string} 格式化后的日期
 */
function formatDate(dateString) {
  if (!dateString) return '未知日期';
  
  const date = new Date(dateString);
  const now = new Date();
  
  // 时间格式化选项
  const timeOptions = { hour: '2-digit', minute: '2-digit' };
  const dateOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
  
  // 检查日期是否有效
  if (isNaN(date.getTime())) return '未知日期';
  
  // 判断是今天
  if (date.toDateString() === now.toDateString()) {
    return `今天 ${date.toLocaleTimeString('zh-CN', timeOptions)}`;
  }
  
  // 判断是昨天
  const yesterday = new Date(now);
  yesterday.setDate(now.getDate() - 1);
  if (date.toDateString() === yesterday.toDateString()) {
    return `昨天 ${date.toLocaleTimeString('zh-CN', timeOptions)}`;
  }
  
  // 判断是今年
  if (date.getFullYear() === now.getFullYear()) {
    return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }) + 
           ' ' + date.toLocaleTimeString('zh-CN', timeOptions);
  }
  
  // 更早的日期
  return date.toLocaleDateString('zh-CN', dateOptions);
}

/**
 * 退出登录
 */
function logout() {
  // 断开WebDAV连接
  webdavClient = null;
  
  // 显示连接表单，隐藏文件浏览器
  connectionForm.classList.remove('hidden');
  fileExplorer.classList.add('hidden');
  
  // 重置文件列表
  fileList.innerHTML = '';
  
  // 清除当前路径
  currentPath = '/';
  currentPathElement.value = currentPath;
  
  // 关闭任何可能打开的预览
  if (previewOverlay.classList.contains('show')) {
    previewOverlay.classList.remove('show');
  }
  
  showToast('logoutSuccess', 'info');
  
  console.log('已断开WebDAV连接');
}

// 初始化Lucide图标的辅助函数
function initializeLucideIcons() {
  if (typeof lucide !== 'undefined') {
    console.log('初始化Lucide图标...');
    try {
      lucide.createIcons();
      console.log('Lucide图标初始化成功');
      return true;
    } catch (error) {
      console.error('Lucide图标初始化失败:', error);
      return false;
    }
  } else {
    console.warn('Lucide库未加载');
    return false;
  }
}

// 在DOM内容变化后重新初始化图标
function refreshIcons() {
  console.log('开始刷新图标...');
  
  // 立即尝试初始化
  const immediate = initializeLucideIcons();
  if (immediate) {
    console.log('图标刷新成功');
    return;
  }
  
  // 如果立即初始化失败，进行延迟重试
  console.log('立即初始化失败，开始重试...');
  let retryCount = 0;
  const maxRetries = 3;
  
  const retryInitialization = () => {
    retryCount++;
    console.log(`图标初始化重试 ${retryCount}/${maxRetries}`);
    
    if (initializeLucideIcons()) {
      console.log('图标重试初始化成功');
      return;
    }
    
    if (retryCount < maxRetries) {
      setTimeout(retryInitialization, 200 * retryCount); // 递增延迟
    } else {
      console.error('图标初始化多次重试后仍失败');
      // 作为最后的补救措施，检查DOM中是否有未初始化的图标
      const uninitializedIcons = document.querySelectorAll('i[data-lucide]:not([data-lucide-initialized])');
      if (uninitializedIcons.length > 0) {
        console.warn(`发现${uninitializedIcons.length}个未初始化的图标，尝试手动处理`);
        uninitializedIcons.forEach((icon, index) => {
          console.log(`处理图标 ${index + 1}: ${icon.getAttribute('data-lucide')}`);
        });
      }
    }
  };
  
  setTimeout(retryInitialization, 100);
}